<template>
  <div ref="animationContainer"></div>
</template>

<script>
import lottie from 'lottie-web'
export default {
  name: 'LottieAnimation',
  props: {
    animationPath: {
      type: String,
      required: true
    },
    options: {
      type: Object,
      default: () => ({})
    }
  },
  mounted() {
    const animationContainer = this.$refs.animationContainer
    this.animation = lottie.loadAnimation({
      container: animationContainer,
      path: this.animationPath,
      ...this.options
    })
  },
  beforeDestroy() {
    if (this.animation) {
      this.animation.destroy()
    }
  }
}
</script>
